<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>用户记事本</title>

  <link rel="stylesheet" href="../lib/bootstrap.min.css">
</head>

<body>

  <!-- 查询表单 -->
  <div class="p-2 d-flex justify-content-end">
    <div class="me-2">
      <input class="form-control" type="text" id="txt_qtitle" placeholder="标题模糊查询">
    </div>

    <div class="me-2">
      <input class="form-control" type="text" id="txt_qinfo" placeholder="内容模糊查询">
    </div>

    <button id="btnQuery" class="btn btn-success me-2">查询</button>

    <button data-bs-toggle="modal" data-bs-target="#addDialog" class="btn btn-primary">添加</button>
  </div>

  <!-- 数据表格 -->
  <table class="table table-bordered table-hover table-striped">

    <thead>
      <tr class="text-bg-danger">
        <th>标题</th>
        <th>内容</th>
        <th>信息最后修改时间</th>
        <th>操作</th>
      </tr>
    </thead>

    <tbody id="tbdata"></tbody>


  </table>

  <!-- 分页的部分 -->
  <nav>
    <ul class="pagination justify-content-center">

      <li class="page-item">
        <a class="page-link" href="javascript:void(0)">&lt;&lt;</a>
      </li>
      <li class="page-item disabled">
        <a class="page-link" href="javascript:void(0)">分页信息</a>
      </li>
      <li class="page-item">
        <a class="page-link" href="javascript:void(0)">&gt;&gt;</a>
      </li>

    </ul>
  </nav>


  <!-- 添加的对话框 -->
  <div class="modal fade" id="addDialog" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">

        <div class="modal-header">
          <h5 class="modal-title">添加记事本信息</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>

        <div class="modal-body">

          <div class="m-2">
            <input id="txt_title" type="text" class="form-control" placeholder="请输入标题">
          </div>

          <div class="m-2">
            <input id="txt_info" type="text" class="form-control" placeholder="请输入内容">
          </div>

        </div>

        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-bs-dismiss="modal">关闭</button>
          <button id="btnAdd" type="button" class="btn btn-primary">添加</button>
        </div>

      </div>
    </div>
  </div>

  <!-- 修改的对话框 -->
  <div class="modal fade" id="modifyDialog" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">

        <div class="modal-header">
          <h5 class="modal-title">修改记事本信息</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>

        <div class="modal-body">

          <div class="m-2">
            <input id="txt_mtitle" type="text" class="form-control" placeholder="请输入标题">
          </div>

          <div class="m-2">
            <input id="txt_minfo" type="text" class="form-control" placeholder="请输入内容">
          </div>

        </div>

        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-bs-dismiss="modal">关闭</button>
          <button id="btnModify" type="button" class="btn btn-primary">保存</button>
        </div>

      </div>
    </div>
  </div>


  <!-- 删除的对话框 -->
  <div class="modal fade" id="delDialog" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">

        <div class="modal-header">
          <h5 class="modal-title">删除记事本信息</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>

        <div class="modal-body">

        </div>

        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-bs-dismiss="modal">关闭</button>
          <button id="btnDel" type="button" class="btn btn-primary">确定</button>
        </div>

      </div>
    </div>
  </div>




  <!-- 弹出层提示框 -->
  <div class="toast-container position-fixed bottom-0 end-0 p-3">
    <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <strong class="me-auto">服务器信息</strong>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
      </div>
      <div class="toast-body">
        Hello, world! This is a toast message.
      </div>
    </div>
  </div>


  <script src="../lib/bootstrap.bundle.min.js"></script>

  <script type="module" src="./js/notepad.js"></script>
</body>

</html>